<script lang="ts" setup>
import Info from '../requirementSolution/components/info.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  cmsRequirementRelease,
  cmsRequirementReleaseProcess,
  cmsRequirementReleaseDetail
} from '@/api'

interface DictItem {
  siteCode: string
  dictionaryCode: string
  dictionaryName: string
}

const dictStore = useDictStore()

const tableData = ref([] as any)
const formRef = ref()
const infoRef = ref()
const searchCardRef = ref()
const tableHeight = ref(0)
const query = reactive({
  requirementName: '',
  requirementArea: '',
  requirementType: '',
  budgetType: '',
  budgetRange: '',
  status: [1, 2, 3, 4],
  pageNum: 1, //当前页码
  pageSize: 10, //每页显示条数
  total: 50
})

const requirementAreaOpt = computed(() => {
  return (dictStore.getDict as DictItem[])?.filter(
    (item: DictItem) => item.siteCode === 'JLY_REQUIREMENTNAME_CODE'
  )
})
const requirementTypeOpt = computed(() => {
  return (dictStore.getDict as DictItem[])?.filter(
    (item: DictItem) => item.siteCode === 'JLY_REQUIREMENTTYPE_CODE'
  )
})
const budgetTypeOpt = computed(() => {
  return (dictStore.getDict as DictItem[])?.filter(
    (item: DictItem) => item.siteCode === 'JLY_BUDGETTYPE_CODE'
  )
})
const stateOpt = computed(() => {
  return (dictStore.getDict as DictItem[])?.filter(
    (item: DictItem) => item.siteCode === 'JLY_REQUIREMENTSTATUS_CODE'
  )
})

const search = () => {
  query.pageNum = 1
  getList()
}

const reset = () => {
  formRef.value?.resetFields()
  getList()
}

const getList = () => {
  cmsRequirementRelease(query).then(({ data }) => {
    tableData.value = data.list
    query.total = data.total
  })
}

const currentChange = (val: any) => {
  query.pageNum = val
  getList()
}
const showInfo = (row: any) => {
  cmsRequirementReleaseDetail({ id: row.id }).then(({ data }) => {
    infoRef.value.open(data)
  })
}

const agreeToPublish = (row: any) => {
  ElMessageBox.confirm('确认发布该需求', '', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      cmsRequirementReleaseProcess({ status: '2', id: row.id }).then(({ code }) => {
        if (code == 0) {
          ElMessage({
            type: 'success',
            message: '发布成功'
          })
          getList()
        }
      })
    })
    .catch(() => {})
}

const overrule = (row: any) => {
  ElMessageBox.confirm('确认驳回该需求', '', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'error'
  })
    .then(() => {
      cmsRequirementReleaseProcess({ status: '0', id: row.id }).then(({ code }) => {
        if (code == 0) {
          ElMessage({
            type: 'success',
            message: '驳回成功'
          })
          getList()
        }
      })
    })
    .catch(() => {})
}

const calculateTableHeight = () => {
  const searchCardHeight = searchCardRef.value?.clientHeight || 0
  const paginationHeight = 48 // 分页组件固定高度
  const margins = 40 // 上下边距总和
  tableHeight.value =
    window.innerHeight - 60 - 38 - 129 - searchCardHeight - paginationHeight - margins
}

onMounted(() => {
  calculateTableHeight()
  window.addEventListener('resize', calculateTableHeight)
  getList()
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', calculateTableHeight)
})
</script>
<template>
  <div class="card" ref="searchCardRef">
    <el-form ref="formRef" class="card-form" :model="query">
      <el-row :gutter="100">
        <el-col :span="6">
          <el-form-item label="需求名称" prop="requirementName">
            <el-input placeholder="请输入" v-model="query.requirementName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="需求领域" prop="requirementArea">
            <el-select placeholder="请选择" v-model="query.requirementArea" clearable>
              <el-option
                v-for="item in requirementAreaOpt"
                :key="item.dictionaryCode"
                :label="item.dictionaryName"
                :value="item.dictionaryCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="需求类型" prop="requirementType">
            <el-select placeholder="请选择" v-model="query.requirementType" clearable>
              <el-option
                v-for="item in requirementTypeOpt"
                :key="item.dictionaryCode"
                :label="item.dictionaryName"
                :value="item.dictionaryCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预算类型" prop="budgetType">
            <el-select placeholder="请选择" v-model="query.budgetType" clearable>
              <el-option
                v-for="item in budgetTypeOpt"
                :key="item.dictionaryCode"
                :label="item.dictionaryName"
                :value="item.dictionaryCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="6">
          <el-form-item label="预算范围" prop="budgetRange">
            <el-input placeholder="请输入" v-model="query.budgetRange" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="当前状态" prop="status">
            <el-select placeholder="请选择" v-model="query.status">
              <el-option
                v-for="item in stateOpt"
                :key="item.dictionaryCode"
                :label="item.dictionaryName"
                :value="item.dictionaryCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button class="serach-btn" type="primary" @click="search">查询</el-button>
          <el-button class="serach-btn" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="card">
    <div class="card-title">需求列表</div>
    <el-table class="card-table" :data="tableData" :height="tableHeight">
      <el-table-column label="需求名称" prop="requirementName" />
      <el-table-column label="需求领域" prop="requirementArea" width="171">
        <template #default="scope">{{
          dictStore.getDictItem('JLY_REQUIREMENTNAME_CODE', scope.row.requirementArea)
            ?.dictionaryName
        }}</template>
      </el-table-column>
      <el-table-column label="需求类型" prop="requirementType" width="166">
        <template #default="scope">{{
          dictStore.getDictItem('JLY_REQUIREMENTTYPE_CODE', scope.row.requirementType)
            ?.dictionaryName
        }}</template>
      </el-table-column>
      <el-table-column label="预算类型" prop="budgetType" width="148">
        <template #default="scope">{{
          dictStore.getDictItem('JLY_BUDGETTYPE_CODE', scope.row.budgetType)?.dictionaryName
        }}</template>
      </el-table-column>
      <el-table-column label="预算范围" prop="budgetRange" width="207" />
      <el-table-column label="当前状态" prop="status" width="170">
        <template #default="scope">{{
          dictStore.getDictItem('JLY_REQUIREMENTSTATUS_CODE', scope.row.status)?.dictionaryName
        }}</template>
      </el-table-column>
      <el-table-column label="操作" width="183">
        <template #default="scope">
          <el-button type="text" @click="showInfo(scope.row)" v-if="scope.row.status"
            >详情</el-button
          >
          <el-button type="text" @click="agreeToPublish(scope.row)" v-if="scope.row.status == 1"
            >同意发布</el-button
          >
          <el-button
            type="text"
            @click="overrule(scope.row)"
            v-if="scope.row.status && scope.row.status < 4"
            >{{ scope.row.status == 1 ? '驳回' : '下架' }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        class="pagination"
        size="small"
        layout="total, prev, pager, next"
        :background="true"
        :total="query.total"
        @current-change="currentChange"
      />
    </div>
  </div>
  <Info ref="infoRef" />
</template>

<style lang="scss" scoped>
.card {
  padding: 24px 20px;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 20px;
  .card-form {
    margin-bottom: -18px;
    .serach-btn {
      border-radius: 0;
    }
  }
  .card-title {
    height: 60px;
    font-size: 16px;
    color: #303133;
    line-height: 22px;
    margin-top: -24px;
    line-height: 60px;
  }
  :deep(.card-table) {
    margin-bottom: 48px;
    --el-table-header-bg-color: #f5f7fa;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
